<template>
  <a-layout class="basic-layout">
    <!-- 侧边栏 -->
    <a-layout-sider
      v-model:collapsed="collapsed"
      :trigger="null"
      collapsible
      class="layout-sider"
      :width="220"
    >
      <div class="logo">
        <img src="/logo.svg" alt="logo" v-if="!collapsed" />
        <span v-if="!collapsed">家教管理系统</span>
      </div>

      <a-menu
        v-model:selectedKeys="selectedKeys"
        theme="dark"
        mode="inline"
        @click="handleMenuClick"
      >
        <a-menu-item
          v-for="item in menuItems"
          :key="item.path"
        >
          <component :is="item.icon" />
          <span>{{ item.title }}</span>
        </a-menu-item>
      </a-menu>
    </a-layout-sider>

    <!-- 主体内容 -->
    <a-layout>
      <!-- 头部 -->
      <a-layout-header class="layout-header">
        <div class="header-left">
          <menu-unfold-outlined
            v-if="collapsed"
            class="trigger"
            @click="collapsed = !collapsed"
          />
          <menu-fold-outlined
            v-else
            class="trigger"
            @click="collapsed = !collapsed"
          />

          <a-breadcrumb class="breadcrumb">
            <a-breadcrumb-item>
              <home-outlined />
              <span>首页</span>
            </a-breadcrumb-item>
            <a-breadcrumb-item v-if="currentRoute">
              {{ currentRoute.meta.title }}
            </a-breadcrumb-item>
          </a-breadcrumb>
        </div>

        <div class="header-right">
          <a-space :size="20">
            <a-badge :count="5">
              <bell-outlined style="font-size: 18px;" />
            </a-badge>

            <a-dropdown>
              <div class="user-info">
                <a-avatar :size="32" src="https://api.dicebear.com/7.x/avataaars/svg?seed=admin" />
                <span class="username">{{ userStore.userInfo?.username || '管理员' }}</span>
                <down-outlined />
              </div>
              <template #overlay>
                <a-menu>
                  <a-menu-item key="profile">
                    <user-outlined />
                    <span>个人中心</span>
                  </a-menu-item>
                  <a-menu-item key="settings">
                    <setting-outlined />
                    <span>系统设置</span>
                  </a-menu-item>
                  <a-menu-divider />
                  <a-menu-item key="logout" @click="handleLogout">
                    <logout-outlined />
                    <span>退出登录</span>
                  </a-menu-item>
                </a-menu>
              </template>
            </a-dropdown>
          </a-space>
        </div>
      </a-layout-header>

      <!-- 内容区域 -->
      <a-layout-content class="layout-content">
        <div class="content-wrapper">
          <router-view v-slot="{ Component }">
            <transition name="fade" mode="out-in">
              <component :is="Component" />
            </transition>
          </router-view>
        </div>
      </a-layout-content>

      <!-- 页脚 -->
      <a-layout-footer class="layout-footer">
        家教平台管理系统 © 2024 Created by Your Team
      </a-layout-footer>
    </a-layout>
  </a-layout>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { message } from 'ant-design-vue'
import {
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  HomeOutlined,
  BellOutlined,
  UserOutlined,
  SettingOutlined,
  LogoutOutlined,
  DownOutlined,
  DashboardOutlined,
  AppstoreOutlined,
  TeamOutlined,
  AuditOutlined,
  FileTextOutlined,
  MessageOutlined,
  ShoppingOutlined
} from '@ant-design/icons-vue'

const router = useRouter()
const route = useRoute()
const userStore = useUserStore()

const collapsed = ref(false)
const selectedKeys = ref([route.path])
const currentRoute = computed(() => route)

// 菜单项配置
const menuItems = [
  { path: '/dashboard', title: '数据总览', icon: DashboardOutlined },
  { path: '/category', title: '分类管理', icon: AppstoreOutlined },
  { path: '/teacher', title: '教员管理', icon: TeamOutlined },
  { path: '/teacher/audit', title: '教员审核', icon: AuditOutlined },
  { path: '/parent', title: '家长管理', icon: UserOutlined },
  // { path: '/feedback', title: '反馈处理', icon: MessageOutlined },
  { path: '/order', title: '订单管理', icon: ShoppingOutlined }
]

// 监听路由变化
watch(() => route.path, (newPath) => {
  selectedKeys.value = [newPath]
})

// 菜单点击事件
const handleMenuClick = ({ key }) => {
  router.push(key)
}

// 退出登录
const handleLogout = () => {
  userStore.logout()
  message.success('退出登录成功')
  router.push('/login')
}
</script>

<style lang="scss" scoped>
.basic-layout {
  min-height: 100vh;
}

.layout-sider {
  background: #001529;

  .logo {
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    background: rgba(255, 255, 255, 0.1);

    img {
      height: 32px;
      margin-right: 12px;
    }

    span {
      color: #fff;
      font-size: 18px;
      font-weight: bold;
      white-space: nowrap;
    }
  }
}

.layout-header {
  background: #fff;
  padding: 0 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

  .header-left {
    display: flex;
    align-items: center;

    .trigger {
      font-size: 20px;
      cursor: pointer;
      transition: color 0.3s;

      &:hover {
        color: var(--primary-color);
      }
    }

    .breadcrumb {
      margin-left: 24px;
    }
  }

  .header-right {
    .user-info {
      display: flex;
      align-items: center;
      gap: 8px;
      cursor: pointer;
      padding: 4px 12px;
      border-radius: 4px;
      transition: background-color 0.3s;

      &:hover {
        background-color: rgba(0, 0, 0, 0.05);
      }

      .username {
        margin-left: 8px;
        font-weight: 500;
      }
    }
  }
}

.layout-content {
  margin: 24px;
  min-height: calc(100vh - 64px - 70px - 48px);

  .content-wrapper {
    padding: 24px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    min-height: 100%;
  }
}

.layout-footer {
  text-align: center;
  background: #f0f2f5;
  color: rgba(0, 0, 0, 0.45);
}
</style>

